<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Vue指令</title>
	<style type="text/css">
		[v-cloak]{
			display: none;
		}
	</style>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<div id="root">
		<!-- 绑定属性 -->
		<h1 v-cloak>Hello,{{name}}</h1>
		<h1 v-text = "name"> ====== </h1>
		<h1>用户名字:{{info.name}}</h1>
		<div v-html='msg'> 111 </div>
		<input type="button" value="按钮1" :title="name" id="">

		<hr>
		<!-- 绑定事件 -->
		<input type="button" value="按钮2"  v-on:click="show">
		<div v-text='info.name' @click = 'show'> 111 </div>

	</div>

	<script type="text/javascript">

		const v = new Vue({
			el:'#root',
			data:{
				name:'world',
				info:{
					avatar:"1111",
					name:"dagoose",
				},
			msg:"<h1> ok , I know</h1>",
			},
			methods:{
				show(){
					alert('hellow')
				}
			}
		})

	</script>
</body>
</html>